<template>
	<view class="home">
		<view class="padding-tb-20 padding-lr-30 ">
			<view class="flex align-center">
				<view :class="type==1?'lineactive':'line'"></view>
				<view class="flex-one border-bottom-ed"></view>
				<view :class="type==2?'lineactive':'line'"></view>
				<view class="flex-one border-bottom-ed"></view>
			</view>
			<view class="flex align-center margin-top-10">
				<view class="flex-one" :class="type==1?'text-32 text-bold':'text-28 text-66'">01填写预约信息</view>
				<view class="flex-one" :class="type==2?'text-32 text-bold':'text-28 text-66'">02支付预约费</view>
			</view>
		</view>
		<view class="margin-top-20 margin-lr-30" v-if="type==1">
			<view class="bg-ff radius-40 padding-20 flex align-center margin-bottom-40 bg-shadow">
				<image :src="image" mode="" class="listimg"></image>
				<view class="flex-one margin-left-30">
					<view class="text-32">{{name}}</view>
					<view class="flex align-center margin-top-10">
						<image src="/static/board/phone.png" mode="" class="phoneimg"></image>
						<view class="text-28 text-66 margin-left-10">{{tel}}</view>
					</view>
					<view class="flex align-center margin-top-10 ">
						<image src="/static/board/adres.png" mode="" class="phoneimg"></image>
						<view class="text-28 text-66 text-cut-one margin-left-10 flex-one">{{address}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-ff radius-40 padding-20 bg-shadow margin-lr-30" v-if="type==1">
			<view class="flex border-bottom-f7 padding-bottom-25">
				<view class="text-28 flex-one"> <text class="text-red padding-right-10">*</text> 预约人数/性别</view>
				<view class="">
					<picker :range="unmlist" @change="choosenv">
						<view class="flex align-center">
							<view class="text-28 margin-right-35">女性</view>
							<view class="text-28 text-right" style="min-width: 90rpx;" :class="nvnum?'':'text-99'">
								{{nvnum?nvnum:'请选择'}} <text class="tyIcon-arrow-right text-24"></text>
							</view>
						</view>
					</picker>
					<picker :range="nanlist" @change="choosenan">
						<view class="flex align-center margin-top-10">
							<view class="text-28 margin-right-35">男性</view>
							<view class="text-28 text-right" style="min-width: 90rpx;" :class="nannum?'':'text-99'">
								{{nannum?nannum:'请选择'}} <text class="tyIcon-arrow-right text-24"></text>
							</view>
						</view>
					</picker>
					<view class="flex align-center margin-top-10 justify-end">
						<view class="text-28">共</view>
						<!-- <input type="text" class="border-bottom-1a width-60" /> -->
						<view class="border-bottom-1a width-60 text-center line-height-40">{{nvnum+nannum}}</view>
						<view class="text-28">人</view>
					</view>
				</view>
			</view>
			<view class="flex align-center margin-top-25">
				<view class="text-28"> <text class="text-red padding-right-10">*</text> 联系电话</view>
				<input type="text" placeholder="请输入联系电话" class="text-28 flex-one text-right" v-model="phonenumber" />
				<view class="tyIcon-arrow-right text-24"></view>
			</view>
			<button class="phonebtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点击授权手机号</button>
			<view class="text-20 margin-top-10 text-center text-99 padding-bottom-25 border-bottom-f7">
				可手动输入手机号码，或者直接点击授权号码</view>
			<view class="flex align-center padding-tb-20 border-bottom-f7">
				<view class="text-28 flex-one"> <text class="text-red padding-right-10">*</text> 是否接受拼桌</view>
				<view class="margin-right-20" :class="is_put==1?'yesbtn':'nobtn'" @click="is_put=1">是</view>
				<view class="" :class="is_put==0?'yesbtn':'nobtn'" @click="is_put=0">否</view>
			</view>

			<view class="flex align-center padding-tb-25 border-bottom-f7" @click="go('/pages/board/time?id='+id)">
				<view class="text-28"> <text class="text-red padding-right-10">*</text> 预约时间</view>
				<view class="text-28 flex-one text-right" v-if="start_time">2025-{{datetime}}
					{{start_time}}至{{end_time}}
					<text class="tyIcon-arrow-right text-24"></text>
				</view>
				<view class="text-28 flex-one text-right" v-else>请选择 <text class="tyIcon-arrow-right text-24"></text>
				</view>
			</view>

			<view class="flex align-center padding-tb-25" @click="choseRoom">
				<view class="text-28"> <text class="text-red padding-right-10">*</text> 包间/大厅</view>
				<view class="text-28 flex-one text-right" v-if="room_title">{{room_title}} ￥{{room_deposit}}押金/人 <text
						class="tyIcon-arrow-right text-24"></text> </view>
				<view class="text-28 flex-one text-right" v-else>请选择 <text class="tyIcon-arrow-right text-24"></text>
				</view>
			</view>
			<view class="text-32 text-bold text-center">合计： <text style="color: #FF0000;">￥{{money}}</text> </view>
			<view class="text-24 text-center margin-top-20 text-66">{{smtext}}</view>
		</view>
		<!-- <view class="text-24 text-66 margin-top-25 margin-lr-40" v-if="type==1">说明：XXXXXXXXX后台可修改</view> -->
		<view class="text-24 text-66 margin-top-25 margin-lr-40" v-if="type==1"> <text
				:class="isread ? 'tyIcon-round-check text-1a' : 'tyIcon-round text-cc'" @click="isread=!isread"></text>
			已阅并承诺 <text @click="go('/pages/game/agreement?type=2')" class="text-1a">《预约须知》</text></view>
		<view class="padding-30 bg-ff bg-shadow margin-lr-30 radius-40 margin-top-40" v-if="type==2">
			<view class="flex align-center">
				<view class="text-28 flex-one">支付</view>
				<view class="text-28 text-red">￥{{money}}</view>
			</view>
			<view class="text-24 text-99 margin-top-25">说明:游玩结束后，押金可用于抵扣游玩的费用，如抵扣后
				有剩余可回退到帐号钱包。</view>
		</view>
		<view class="padding-30 bg-ff bg-shadow margin-lr-30 radius-40 margin-top-40" v-if="type==2">
			<view class="padding-bottom-25 border-bottom-f7">支付方式</view>
			<view class="flex align-center margin-top-25">
				<image src="/static/board/wx.png" mode="" class="wximg"></image>
				<image src="/static/board/wxmoney.png" mode="" class="wxmoney margin-left-10"></image>
				<view class="flex-one margin-left-10">
					<view class="text-28">钱包余额￥{{men.money}}</view>
					<view class="text-24 text-99">钱包支付￥{{money}}后还需支付￥{{money-men.money<0?0:(Number(money)-Number(men.money)).toFixed(2)}}</view>
				</view>
				<view class="tyIcon-round-check"></view>
			</view>
		</view>
		<view class="nextbtn" @click="getNext" v-if="type==1">下一步</view>
		<view class="nextbtn" v-if="type==2" @click="getPay" style="margin-top: 446rpx;">确认预约并支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				id: "", //门店id
				image: "",
				name: "",
				tel: "",
				address: "",
				unmlist: [],
				nanlist: [],
				nvnum: "", //女人数
				nannum: "", //男人数
				phonenumber: "", //手机号
				is_put: 1, //1是 0 否
				start_time: "",
				end_time: "",
				money: 0,
				room_id: "",
				room_title: "",
				room_deposit: "",
				isread: false,
				order_id: "",
				datetime: "",
				smtext: "",
				men: ""
			}
		},
		onLoad(options) {
			this.rq.getData('shop/getShop',{
				id:uni.getStorageSync('store_id')
			}).then(res=>{
				if(res.code==1){
					this.id = res.data.id
					this.image = res.data.image
					this.name = res.data.name
					this.address = res.data.address_detail
					this.tel = res.data.tel
				}
			})
		},
		onReady() {

			this.rq.getData('Reservations/num_list').then(res => {
				if (res.code == 1) {
					this.unmlist = res.data
					this.nanlist = res.data
				}
			})
			this.rq.getData('Reservations/reservations_notice').then(res => {
				if (res.code == 1) {
					this.smtext = res.data.reservations
				}
			})
		},
		onShow() {
			if (uni.getStorageSync('start_time')) {
				this.start_time = uni.getStorageSync('start_time')
			}
			if (uni.getStorageSync('end_time')) {
				this.end_time = uni.getStorageSync('end_time')
			}
			if (uni.getStorageSync('datetime')) {
				this.datetime = uni.getStorageSync('datetime')
			}
			if (uni.getStorageSync('room_id')) {
				this.room_id = uni.getStorageSync('room_id')
			}
			if (uni.getStorageSync('room_title')) {
				this.room_title = uni.getStorageSync('room_title')
			}
			if (uni.getStorageSync('room_deposit')) {
				this.room_deposit = uni.getStorageSync('room_deposit')
				var room_deposit = uni.getStorageSync('room_deposit')
				var num = Number(Number(this.nannum) + Number(this.nvnum))
				this.money = num * Number(room_deposit)
				console.log(num, this.money)
				return false
				var num = Number(Number(this.nannum) + Number(this.nvnum))
				var room_deposit = uni.getStorageSync('room_deposit')
				var timenum = uni.getStorageSync('num') ? uni.getStorageSync('num') : 1
				this.money = num * Number(room_deposit) * Number(timenum)
				console.log(num, this.money)
			}
			this.rq.getData('Wechat/user_info').then(res => {
				this.men = res.data
			})
		},
		methods: {
			choosenv(e) {
				console.log(e)
				if (this.nvnum == '') {

				} else {
					this.nannum == ''
				}
				this.nvnum = this.unmlist[e.detail.value]
				this.rq.getData('Reservations/num_list', {
					num: this.unmlist[e.detail.value]
				}).then(res => {
					this.nanlist = res.data
				})
				if (uni.getStorageSync('room_deposit')) {
					this.room_deposit = uni.getStorageSync('room_deposit')
					var num = Number(Number(this.nannum) + Number(this.nvnum))
					var room_deposit = uni.getStorageSync('room_deposit')
					this.money = num * Number(room_deposit)
				}
			},
			choosenan(e) {
				console.log(e)
				if (this.nannum == '') {

				} else {
					this.nvnum == ''
				}
				this.nannum = this.nanlist[e.detail.value]
				this.rq.getData('Reservations/num_list', {
					num: this.nanlist[e.detail.value]
				}).then(res => {
					this.unmlist = res.data
				})
				if (uni.getStorageSync('room_deposit')) {
					this.room_deposit = uni.getStorageSync('room_deposit')
					var num = Number(Number(this.nannum) + Number(this.nvnum))
					var room_deposit = uni.getStorageSync('room_deposit')
					this.money = num * Number(room_deposit)
				}
			},
			//手机号授权
			getPhoneNumber(e) {
				console.log(e)
				var that = this
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.login({
						provider: 'alipay',
						scopes: ['auth_base'],
						success: function(loginRes) {
							console.log(loginRes)
							that.rq.getData('Wechat/getPhone', {
								encryptedData: e.detail.encryptedData,
								code: loginRes.code,
								iv: e.detail.iv,
							}).then((res) => {
								if (res.code == 1) {
									that.phonenumber = res.data.phoneNumber
								}
							})
						}
					})

				}
			},
			//选择包间
			choseRoom() {
				if (this.nannum == '' && this.nvnum == '') {
					this.cn.alert('请选择预约人数')
					return false
				}
				var num = Number(Number(this.nannum) + Number(this.nvnum))
				console.log(num)
				let currentYear = new Date().getFullYear();
				let start_time = currentYear + '-' + this.datetime + ' ' + this.start_time
				let end_time = currentYear + '-' + this.datetime + ' ' + this.end_time
				uni.setStorageSync('stroom',start_time)
				uni.setStorageSync('edroom',end_time)
				uni.navigateTo({
					url: '/pages/board/roomlist?shopid=' + this.id + '&num=' + Number(num) + '&is_put=' + this
						.is_put
				})
			},
			//下一步
			getNext() {
				if (this.phonenumber == '') {
					this.cn.alert('请输入联系电话')
					return false
				}
				if (this.room_id == '') {
					this.cn.alert('请选择包间/大厅')
					return false
				}
				if (!this.isread) {
					this.cn.alert('请阅读并承诺《预约须知》')
					return false
				}
				this.type = 2

			},
			//下单支付
			getPay() {
				let currentYear = new Date().getFullYear();
				console.log(currentYear);
				this.rq.getData('Reservations/reservation', {
					men: this.nannum,
					women: this.nvnum,
					phone: this.phonenumber,
					is_put: this.is_put,
					start_time: currentYear + '-' + this.datetime + ' ' + this.start_time,
					end_time: currentYear + '-' + this.datetime + ' ' + this.end_time,
					room_id: this.room_id,
					shop_id: this.id
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.order_id = res.data.id
						var order_id = res.data.id
						console.log(order_id)
						if (res.data.is_pay == 1) {
							this.rq.getData('Reservations/reservation_payment', {
								id: this.order_id
							}).then(res => {
								if (res.code == 1) {
									this.cn.requestPayment({
										appId: res.data.payment.appId,
										nonceStr: res.data.payment.nonceStr,
										package: res.data.payment.package,
										paySign: res.data.payment.paySign,
										signType: res.data.payment.signType,
										timeStamp: res.data.payment.timeStamp,
									}, 1).then(res => {
										uni.showModal({
											content: '预约成功',
											cancelText: '返回首页',
											cancelColor: "#727272",
											confirmText: "查看订单",
											confirmColor: "#000000",
											success: function(res) {
												if (res.confirm) {
													uni.redirectTo({
														url: '/pages/board/orderdetail?id=' +
															order_id +
															'&type=1'
													})
												} else if (res.cancel) {
													uni.reLaunch({
														url: '/pages/board/index'
													})
												}
											}
										})
									}).catch(res => {
										uni.showModal({
											content: '预约成功',
											cancelText: '返回首页',
											cancelColor: "#727272",
											confirmText: "查看订单",
											confirmColor: "#000000",
											success: function(res) {
												if (res.confirm) {
													uni.redirectTo({
														url: '/pages/board/orderdetail?id=' +
															order_id +
															'&type=1'
													})
												} else if (res.cancel) {
													uni.reLaunch({
														url: '/pages/board/index'
													})
												}
											}
										})
									})
								}
							})
						} else {
							console.log(order_id)
							uni.showModal({
								content: '预约成功',
								cancelText: '返回首页',
								cancelColor: "#727272",
								confirmText: "查看订单",
								confirmColor: "#000000",
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pages/board/orderdetail?id=' + order_id +
												'&type=1'
										})
									} else if (res.cancel) {
										uni.reLaunch({
											url: '/pages/board/index'
										})
									}
								}
							})
						}
					} else {
						this.type = 1
					}
				})

			}
		},
		onUnload() {
			uni.removeStorageSync('start_time')
			uni.removeStorageSync('end_time')
			uni.removeStorageSync('room_id')
			uni.removeStorageSync('room_title')
			uni.removeStorageSync('room_deposit')
			uni.removeStorageSync('num')
			uni.removeStorageSync('stroom')
			uni.removeStorageSync('edroom')
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding-bottom: 40rpx;
	}

	.lineactive {
		width: 20rpx;
		height: 20rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 6rpx solid #000000;
		border-radius: 50%;
	}

	.line {
		width: 20rpx;
		height: 20rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 6rpx solid #d9d9d9;
		border-radius: 50%;
	}

	.listimg {
		width: 226rpx;
		height: 226rpx;
		border-radius: 40rpx;
	}

	.phoneimg {
		width: 28rpx;
		height: 28rpx;
	}

	.jlbtn {
		font-size: 24rpx;
		color: #999999;
		line-height: 50rpx;
		height: 50rpx;
		padding: 0 15rpx;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #999999;
	}

	.listbtn {
		width: 174rpx;
		height: 60rpx;
		background: #101010;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.border-bottom-1a {
		border-bottom: 1rpx solid #1a1a1a;
	}

	.border-bottom-f7 {
		border-bottom: 1rpx solid #f7f7f7;
	}

	.phonebtn {
		width: 302rpx;
		height: 72rpx;
		/* box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(66,66,67,0.25); */
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #101010;
		font-size: 28rpx;
		color: #101010;
		line-height: 72rpx;
		text-align: center;
		background: none;
		margin: 20rpx auto 0;
	}

	.yesbtn {
		width: 100rpx;
		height: 56rpx;
		background: #101010;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 56rpx;
		text-align: center;
	}

	.nobtn {
		width: 100rpx;
		height: 56rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #999999;
		font-size: 28rpx;
		color: #1a1a1a;
		line-height: 56rpx;
		text-align: center;
	}

	.nextbtn {
		width: 690rpx;
		height: 88rpx;
		background: #101010;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(66, 66, 67, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: 110rpx auto;
	}

	.wximg {
		width: 44rpx;
		height: 44rpx;
	}

	.wxmoney {
		width: 42rpx;
		height: 42rpx;
	}
</style>